<template>
  <div>
    <!--头 -->
    <header>
      <article>
        <div class="mt-logo">
          <!--顶部导航条 -->
          <div class="am-container header">
            <ul class="message-l">
              <div class="topMessage">
                <div class="menu-hd" v-if="isLogin">
                  {{ username }},欢迎您
                </div>
                <div class="menu-hd" v-else="isLogin">
                  亲,请 <a href="#" target="_top" class="h">[登录]</a>
                  <a href="#" target="_top" class="h">[免费注册]</a>
                </div>

              </div>
            </ul>
            <ul class="message-r">
              <div class="topMessage home">
                <div class="menu-hd"><a href="#" target="_top" class="h">商城首页</a></div>
              </div>
              <div class="topMessage my-shangcheng">
                <div class="menu-hd MyShangcheng"><a href="javascript:void(0) " @click="goPersonCenter()" target="_top"><i
                    class="am-icon-user am-icon-fw"></i>个人中心</a></div>
              </div>
              <div class="topMessage mini-cart">
                <div class="menu-hd"><a id="mc-menu-hd" href="#" target="_top"><i
                    class="am-icon-shopping-cart  am-icon-fw"></i><span>购物车</span><strong
                    id="J_MiniCartNum" class="h">0</strong></a></div>
              </div>
              <div class="topMessage favorite">
                <div class="menu-hd"><a href="#" target="_top"><i
                    class="am-icon-heart am-icon-fw"></i><span>收藏夹</span></a></div>
              </div>
            </ul>
          </div>

          <!--悬浮搜索框-->

          <div class="nav white">
            <div class="logoBig">
              <li><img src="@/assets/images/logobig.png"/></li>
            </div>

            <div class="search-bar pr">
              <a name="index_none_header_sysc" href="#"></a>
              <form>
                <input id="searchInput" name="index_none_header_sysc" type="text" placeholder="搜索"
                       autocomplete="off" v-model="keyword">
                <input id="ai-topsearch" class="submit am-btn" value="搜索" index="1" @click="goSearch">
              </form>
            </div>
          </div>

          <div class="clear"></div>
        </div>
      </article>
    </header>
    <div class="nav-table">
      <div class="long-title"><span class="all-goods">全部分类</span></div>
      <div class="nav-cont">
        <ul>
          <li class="index"><a href="#">首页</a></li>
          <li class="qc"><a href="#">闪购</a></li>
          <li class="qc"><a href="#">限时抢</a></li>
          <li class="qc"><a href="#">团购</a></li>
          <li class="qc last"><a href="#">大包装</a></li>
        </ul>
        <div class="nav-extra">
          <i class="am-icon-user-secret am-icon-md nav-user"></i><b></b>我的福利
          <i class="am-icon-angle-right" style="padding-left: 10px;"></i>
        </div>
      </div>
    </div>
    <b class="line"></b>
    <div class="center">
      <div class="col-main">
        <div class="main-wrap">
          <!--动态变化的组件开始-->
          <router-view @changeIndex="changeMenuIndex"></router-view>
          <!--动态变化的组件结束-->
        </div>
        <!--底部-->
        <div class="footer">
          <div class="footer-hd">
            <p>
              <a href="#">恒望科技</a>
              <b>|</b>
              <a href="#">商城首页</a>
              <b>|</b>
              <a href="#">支付宝</a>
              <b>|</b>
              <a href="#">物流</a>
            </p>
          </div>
          <div class="footer-bd">
            <p>
              <a href="#">关于恒望</a>
              <a href="#">合作伙伴</a>
              <a href="#">联系我们</a>
              <a href="#">网站地图</a>
              <em>© 2015-2025 Hengwang.com 版权所有</em>
            </p>
          </div>
        </div>

      </div>

      <aside class="menu">
        <ul>
          <li :class="{'person':true,'active':menuIndex==0}">
            <a href="javascript:void(0)" @click="goTo('/index')">个人中心</a>
          </li>
          <li class="person">
            <a href="#">个人资料</a>
            <ul>
              <li :class="{'active':menuIndex==1}"><a href="information.html">个人信息</a></li>
              <li :class="{'active':menuIndex==2}"><a href="safety.html">安全设置</a></li>
              <li :class="{'active':menuIndex==3}"><a href="address.html">收货地址</a></li>
            </ul>
          </li>
          <li class="person">
            <a href="#">我的交易</a>
            <ul>
              <li :class="{'active':menuIndex==4}"><a href="javascript:void(0)" @click="goTo('/orders?activeName=first')">订单管理</a></li>
              <li :class="{'active':menuIndex==5}"><a href="change.html">退款售后</a></li>
            </ul>
          </li>
          <li class="person">
            <a href="#">我的资产</a>
            <ul>
              <li :class="{'active':menuIndex==6}"><a href="coupon.html">优惠券 </a></li>
              <li :class="{'active':menuIndex==7}"><a href="bonus.html">红包</a></li>
              <li :class="{'active':menuIndex==8}"><a href="bill.html">账单明细</a></li>
            </ul>
          </li>

          <li class="person">
            <a href="#">我的小窝</a>
            <ul>
              <li :class="{'active':menuIndex==9}"><a href="collection.html">收藏</a></li>
              <li :class="{'active':menuIndex==10}"><a href="foot.html">足迹</a></li>
              <li :class="{'active':menuIndex==11}"><a href="comment.html">评价</a></li>
              <li :class="{'active':menuIndex==12}"><a href="news.html">消息</a></li>
            </ul>
          </li>

        </ul>

      </aside>
    </div>
    <!--引导 -->
    <div class="navCir">
      <li><a href="@/assets/home/home.html"><i class="am-icon-home "></i>首页</a></li>
      <li><a href="@/assets/home/sort.html"><i class="am-icon-list"></i>分类</a></li>
      <li><a href="@/assets/home/shopcart.html"><i class="am-icon-shopping-basket"></i>购物车</a></li>
      <li class="active"><a href="index.html"><i class="am-icon-user"></i>我的</a></li>
    </div>
  </div>
</template>

<script>
import PersonIndex from "@/components/person/PersonIndex";

export default {
  name: "PersonMain",
  components: {
    PersonIndex
  },
  data() {
    return {
      isLogin: false,
      username: 'satan',
      keyword: '',
      menuIndex: 0,
    }
  },
  created() {
    if (this.$store.state.account) {
      this.isLogin = true
      this.username = this.$store.state.account
    }
  },
  methods: {
    goSearch() {
      if (this.keyword!=''){
        this.$router.push("/search?keyword=" + this.keyword)
      }else {
        this.$message({
          message: '请输入搜索关键字',
          type: 'warning'
        })
      }
    },
    goPersonCenter(){
      this.$router.push("/person");
    },
    //路由跳转方法
    goTo(path){
      this.$router.push(path);
    },
    changeMenuIndex(index){
      this.menuIndex = index;
    }
  }

}
</script>

<style scoped>

</style>